/* eslint-disable react/jsx-key */
import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Button, Image, Alert, Tooltip, Modal, message, Popconfirm } from 'antd';
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { connect, history } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { deleteaccount_tax } from '@/services/business';
import { classify } from '@/services/basic';

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input

let defaultFields = {
  classify_id: {
    value: null,
    type: 'select',
    title: '代账客户类型',
    name: ['classify_id'],
    options: {
      database: classify,
      params: { is_all: 1 },
    },
    required: true,
  },
  account_precent: {
    value: null,
    type: 'inputnumber',
    title: '代账提成百分比(%)',
    name: ['account_precent'],
    required: true,
  },
  review_precent: {
    value: null,
    type: 'inputnumber',
    title: '复核提成百分比(%)',
    name: ['review_precent'],
    required: true,
  },
  base: {
    value: null,
    type: 'inputnumber',
    title: '固定提成(元)',
    name: ['base'],
    required: true,
  },
};

function Six(props) {
  const [vs, cvs] = useState(false), //表单显/隐
    [fields, cf] = useState(defaultFields),
    [iftype, ciftype] = useState({});

  let actionRef = useRef(),
    ChildRef = null;
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }

  const columns = [
    {
      title: '代账类型',
      dataIndex: 'classify_name',
      key: 'classify_name',
    },
    {
      title: '代账提成百分比',
      dataIndex: 'account_precent',
      key: 'account_precent',
    },
    {
      title: '复核提成百分比',
      dataIndex: 'review_precent',
      key: 'review_precent',
    },
    {
      title: '固定提成',
      dataIndex: 'base',
      key: 'base',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (text, record, _, action) => [
        <a
          style={{ color: '#1890ff' }}
          onClick={() => {
            cvs(true);
            cf((fields) => {
              for (let i in fields) {
                fields[i].value = record[i];
              }
              return { ...fields };
            });
            ciftype({
              val: 'edit',
              title: '编辑代账提成',
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <Popconfirm
          placement="bottom"
          title={'确认删除该代账提成？'}
          onConfirm={() => {
            deleteaccount_tax(record.id).then((res) => {
              if (res.code == 0) {
                message.success('操作成功');
                reload();
              }
            });
          }}
          okText="删除"
          cancelText="取消"
        >
          <a style={{ color: '#f50' }}>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  let extrarender = [
    <div
      className="action"
      title="新增"
      onClick={() => {
        cvs(true);
        cf(() => {
          for (let i in defaultFields) {
            defaultFields[i].value = null;
          }
          return { ...defaultFields };
        });
        ciftype({
          val: 'add',
          title: '新增代账提成',
        });
      }}
    >
      <PlusOutlined />
    </div>,
  ];

  let saveData = (values) => {
    let { dispatch } = props;
    if (iftype.val == 'add') {
      dispatch({
        type: 'business/account_tax',
        payload: values,
      }).then((res) => {
        if (res.code == 0) {
          message.success('操作成功');
          reload();
          cvs(false);
        }
      });
    } else if (iftype.val == 'edit') {
      dispatch({
        type: 'business/editaccount_tax',
        payload: { ...values, id: iftype.id },
      }).then((res) => {
        if (res.code == 0) {
          message.success('操作成功');
          reload();
          cvs(false);
        }
      });
    }
  };

  return (
    <div className="pgcontainer">
      <AutoTable
        bordered={false}
        pagetitle={
          <span>
            代账提成设置{' '}
            <a
              style={{ fontSize: 14, paddingLeft: 12 }}
              onClick={() => {
                props.close();
              }}
            >
              {' '}
              返回
            </a>
          </span>
        } //页面标题
        pageextra={extrarender} //页面操作 新增or批量终止
        columns={columns}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
        path="/wbn-api/account_tax"
        extraparams={{ type: 0 }}
        //withCard={false}
        //cardtitle = "name" //卡片标题
        //cardavatar = "img_url" //卡片头像
      ></AutoTable>
      <Modal
        maskClosable={false}
        title={iftype.title}
        open={vs}
        onCancel={() => cvs(false)}
        footer={false}
        width={1400}
        destroyOnClose={true}
      >
        <InitForm
          fields={fields}
          submitData={(values) => {
            saveData(values);
          }}
          onChange={(changedValues, allValues) => {
            //联动操作
          }}
          submitting={
            props.loading.effects['business/account_tax'] ||
            props.loading.effects['business/editaccount_tax'] ||
            !vs
          }
        ></InitForm>
      </Modal>
    </div>
  );
}

export default connect(({ business, loading }) => ({
  business,
  loading,
}))(Six);
